<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>视频列表</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
</head>

<body>
  <div class="''">
    <div class="w-title"><span class="w-blueline"></span>
      <a href="###">视频列表</a>
    </div>
    <div class="layui-row">
      <div class="layui-col-md1">&nbsp;</div>
      <div class="layui-col-md4">
        <div class="layui-form-item">
          <label class="layui-form-label">所属管理区</label>
          <div class="layui-input-block">
            <select name="city" lay-verify="">
              <option value="">请选择</option>
            </select>
          </div>
        </div>
      </div>
      <div class="layui-col-md1">&nbsp;</div>
      <div class="layui-col-md4">
        <div class="layui-form-item">
          <label class="layui-form-label">所属分区</label>
          <div class="layui-input-block">
            <select name="city" lay-verify="">
              <option value="">请选择</option>
            </select>
          </div>
        </div>
      </div>

    </div>
    <div class="layui-row">
      <div class="layui-col-md1">&nbsp;</div>
      <div class="layui-col-md4">
        <div class="layui-form-item">
          <label class="layui-form-label">设备名称</label>
          <div class="layui-input-block">
            <input type="text" name="" id="" value="" />
          </div>
        </div>
      </div>
      <div class="layui-col-md1">&nbsp;</div>
      <div class="layui-col-md4">
        <div class="layui-form-item">
          <label class="layui-form-label">设备类型</label>
          <div class="layui-input-block">
            <select name="city" lay-verify="">
              <option value="">请选择</option>
            </select>
          </div>
        </div>
      </div>
      <div class="layui-col-md2 alignright">
        <a href="###" class="layui-btn">查询</a>
        <a href="###" class="layui-btn">重置</a>
        <a target="iframe" href="sptj.html" class="layui-btn">添加</a>
      </div>
    </div>
    <table id="demoTable" lay-filter="test"></table>
  </div>
  <script src="../lib/layui/layui.js"></script>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">申请</a>
    <a class="layui-btn layui-btn-primary  layui-btn-xs" lay-event="del">修改</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">删除</a>
  </script>
  <script>
    layui.use(['table', 'jquery'], function () {
      var table = layui.table;
      var $ = jQuery = layui.$;
      //第一个实例
      table.render({
        elem: '#demoTable',
        //					height: 315
        //  ,url: '/demo/table/user/' //数据接口
        //						,
        page: true //开启分页
          ,
        cols: [
          [ //表头
            {
              field: 'xh',
              title: '序号',
              width: '10%',
              align: 'center',
              fixed: 'left'
            }, {
              field: 'spmc',
              title: '视频名称',
              align: 'center',
              width: '10%'
            }, {
              field: 'yhm',
              title: '用户名',
              align: 'center',
              width: '10%'
            }, {
              field: 'ml',
              title: '码流',
              align: 'center',
              width: '10%'
            }, {
              field: 'splx',
              title: '视频类型',
              align: 'center',
              width: '10%'
            }, {
              field: 'dk',
              title: '端口',
              width: '10%',
              align: 'center',
            }, {
              field: 'shzt',
              title: '审核状态',
              width: '10%',
              align: 'center',
            }, {
              field: 'sfsyxs',
              title: '是否首页显示',
              width: '10%',
              align: 'center',
            }, {
              field: 'cz',
              title: '操作',
              width: '20%',
              align: 'center',
              toolbar: '#barDemo'
            }
          ]
        ],
        data: [{ //表格数据
          "xh": "1",
          "spmc": "大棚卷帘控制柜",
          "yhm": "棚区12号",
          "ml": "主码流",
          "splx": "海康",
          "dk": "8888",
          "shzt": "未审核",
          "sfsyxs": "关闭",
          "cz": "",
        }, {
          "xh": "2",
          "spmc": "大棚卷帘控制柜",
          "yhm": "棚区12号",
          "ml": "主码流",
          "splx": "海康",
          "dk": "8888",
          "shzt": "未审核",
          "sfsyxs": "关闭",
          "cz": "",
        }]
      });
    });
  </script>
</body>

</html>